import React from 'react';

// 关于渲染
function App(props) {
    const num = 1;
    const arr = [10,20,30,40];
    const str = <h5>1</h5>;// 元素常量
    const arr2 = [<h5 key={1}>1</h5>,<h5 key={2}>2</h5>,<h5 key={3}>3</h5>,<h5 key={4}>4</h5>];
    // const arr3 = arr.map(item=>{
    //     return (
    //         <h5 key={item}>{item}</h5>
    //     )
    // })

    const arr3 = arr.map(item=>(
        <h5 key={item}>{item}</h5>
    ))
    return (
        <div>
            <h3>App</h3>
            <p>{num}</p>
            <p>{"字符串"}</p>
            <p>true:{true}</p>
            <p>false:{false}</p>
            <p>null:{null}</p>
            <p>undefined:{undefined}</p>
            {/*<p>对象：{{a:1,b:2}}</p>*/}
            <p>数组1：{[1,2,3,4]}</p>
            <p>数组2：{arr}</p>
            <div>str:{str}</div>
            <div>arr2:{arr2}</div>
            <div>arr3:{arr3}</div>
            <div>
                {
                    arr.map((item,index)=>(
                        <h3 key={index}>{item}</h3>
                    ))
                }
            </div>
        </div>
    );
}

export default App;